<template>
  <div>
    <!-- <el-collapse-transition> -->
    <div class="app-main-content-box">
      <!--filter区域-->
      <div class="filter-container">
        <el-form ref="filterForm" :model="filterForm" size="small">
          <el-row class="row">
            <el-col :span="4">
              <el-form-item label="" label-width="0" prop="userPhone">
                <el-input
                  v-model="filterForm.userPhone"
                  placeholder="请输入用户手机号"
                  class="input-with-select"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="" label-width="0" prop="tweeterPhone">
                <el-input
                  v-model="filterForm.tweeterPhone"
                  placeholder="请输入推客手机号"
                  class="input-with-select"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="" label-width="0" prop="status">
                <el-select v-model="filterForm.status" placeholder="请选择">
                  <el-option
                    v-for="item in statusList"
                    :key="item.title"
                    :label="item.title"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="" prop="customParams_Date" label-width="0">
                <el-date-picker
                  v-model="filterForm.customParams_Date"
                  size="small"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetimerange"
                  :default-time="['00:00:00', '23:59:59']"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item class="filter-btn">
                <el-button
                  type="primary"
                  round
                  @click="submitForm('filterForm')"
                  >查 询</el-button
                >
                <el-button round @click="resetForm('filterForm')"
                  >重 置</el-button
                >
                <el-button round @click="downExcel">导 出</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 统计卡片 end -->
      <div>
        <!-- 表格内容 -->
        <div class="list-table">
          <el-table
            size="small"
            :data="list"
            border
            stripe
            style="width: 100%"
            empty-text="暂无数据"
          >
            <el-table-column prop="userName" label="用户姓名" align="center" />
            <el-table-column
              prop="userPhone"
              label="用户手机号"
              min-width="130"
              align="center"
            />
            <el-table-column prop="carName" label="车型" align="center" />
            <el-table-column
              prop="tweeterName"
              label="推客昵称"
              align="center"
            >
            <template slot-scope="scope">
                {{ scope.row.tweeterName|| '无'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="tweeterPhone"
              label="推客手机号"
              align="center"
            >
            <template slot-scope="scope">
                {{ scope.row.tweeterPhone|| '无'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="parentName"
              label="上级推客"
              align="center"
            >
            <template slot-scope="scope">
                {{ scope.row.parentName|| '无'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="parentPhone"
              label="上级手机号"
              align="center"
            >
             <template slot-scope="scope">
                {{ scope.row.parentPhone|| '无'}}
              </template>
            </el-table-column>
            <el-table-column
              prop="signUpTime"
              label="报名时间"
              min-width="120"
              align="center"
            />
            <el-table-column
              prop="tweeterRemark"
              label="推客备注"
              align="center"
            >
             <template slot-scope="scope">
                {{ scope.row.tweeterRemark|| '-'}}
              </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
              <template slot-scope="scope">
                {{ statusOptions[scope.row.status] }}
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              min-width="120"
              align="center"
            >
              <template slot-scope="scope">
                <div class="play">
                  <el-button
                    type="text"
                    size="mini"
                    round
                    @click="followUp(scope.row)"
                    :disabled="scope.row.status == 2 || scope.row.status == 3"
                  >
                    跟进
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    round
                    @click="followUp(scope.row, 1)"
                  >
                    查看记录
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <pagination-direction
            v-if="paginationConfig.total !== 0"
            :config="paginationConfig"
            @sizeschange="getData()"
            @pagechange="getData()"
          />
        </div>
      </div>
    </div>
    <fllowDialog
      :statusList="statusList"
      :statusOptions="statusOptions"
      @upFatherData="getData()"
      ref="fllowDialog"
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { downExportBookingOrders } from "@/api/download";
import { getLoanList,exportExcel } from "@/views/wxaMallModule/api/loan";
import fllowDialog from "./fllowUpDialog.vue";
export default {
  components: {
    fllowDialog,
  },
  data() {
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    return {
      // 配置
      // 分页配置
      testOptions: [2, 2, 1, 1, 1, 1, 2, 2, 2],
      paginationConfig: {
        direction: "center", // 分页位置
        layout: "total, sizes, prev, pager, next, jumper", // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10, // 每页条数-默认10
      },
      //   查询
      filterForm: {
        customParams_Date: [
          this.$momentMini(start).format("YYYY-MM-DD") + " 00:00:00",
          this.$momentMini(end).format("YYYY-MM-DD") + " 23:59:59",
        ],
        userPhone: "",
        tweeterPhone: "",
        status: "",
      },
      statusList: [
        { title: "待跟进", value: 0 },
        { title: "跟进中", value: 1 },
        { title: "已成单", value: 2 },
        { title: "已取消", value: 3 },
      ],
      list: [],
      //   状态列表
      statusOptions: {
        0: "待跟进",
        1: "跟进中",
        2: "已成单",
        3: "已取消",
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    // 打开弹窗
    followUp(data, type) {
      this.$refs.fllowDialog.openFllowUpDialog(data, type);
    },

    // 提交查询表单
    submitForm() {
      this.getData();
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 获取数据
    getData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      this.$refs.filterForm.validate((valid) => {
        if (valid) {
          let { status, tweeterPhone, userPhone, customParams_Date } =
            this.filterForm;
          let params = {
            status,
            tweeterPhone,
            userPhone,
            startTime: customParams_Date ? customParams_Date[0] : "",
            endTime: customParams_Date ? customParams_Date[1] : "",
            page,
            pageSize,
          };
          getLoanList(params).then((res) => {
            if (res.code == 0) {
              let { data } = res;
              this.list = data.list;
              this.paginationConfig.total = data.total;
            }
          });
        }
      });
    },
    downExcel(page = this.paginationConfig.page,
      ) {
      this.$refs.filterForm.validate((valid) => {
        if (valid) {
          let { status, tweeterPhone, userPhone, customParams_Date } =this.filterForm;
          let params = {
            status,
            tweeterPhone,
            userPhone,
            startTime: customParams_Date ? customParams_Date[0] : "",
            endTime: customParams_Date ? customParams_Date[1] : "",
            page:this.paginationConfig.page,
            pageSize :this.paginationConfig.pageSize,
          };
          exportExcel(params).then((res) => {
           if (res.code === 0) {
                this.$alert(
                  '数据导出中，请稍后到数据下载中心进行下载',
                  '提示',
                  {
                    confirmButtonText: '确定',
                    center: true,
                    type: 'success',
                    callback: action => {}
                  }
                )
              }
          });
        }
      });

    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.filter-container {
  .el-select {
    // width: 120px;
    width: 100%;
  }
  .el-input {
    width: 100%;
    // width: 400px;
  }
  .el-range-editor {
    width: 100%;
  }
}
.row {
  /deep/.el-col {
    padding-right: 20px;
  }
}
.filter-btn {
  margin-bottom: 20px;
  /deep/.el-form-item__content {
    margin-left: 0px !important;
  }
}
// 单选换行
.el-radio + .el-radio {
  margin-left: 0;
}
.el-radio {
  margin-right: 10px;
  line-height: 32px;
}
.btn_order {
  &:hover {
    color: #ffb72f;
    cursor: pointer;
  }
}
.play {
  display: flex;
}
.pro_list {
  max-height: 400px;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none;
    // width: 10px;
  }
  .pro_list_li {
    margin: 10px 0;
    .content {
      display: flex;
      align-items: center;
      ._img {
        width: 90px;
        height: 90px;
        background-color: #ffb72f;
        border-radius: 10px;
        overflow: hidden;
      }
      .right {
        display: flex;
        flex: 1;
        margin-left: 30px;
        justify-content: space-between;
      }
    }
    ._free {
      margin: 20px 0 20px 120px;
      color: #d1d1d1;
      span {
        background: #ffb72f;
        color: #fff;
        font-size: 14px;
        display: inline-block;
        padding: 2px;
        margin-right: 20px;
      }
    }
  }
}
</style>
